<template>
  <yd-ls-layout title="积分中心" torgtxt="积分规则" :onfoot=false :tolfurl="urls"  @handle-rgtxt-button="handleRule">
    <div class="yd-ls-height"></div>
    <div class="yd-ls-points-top">
      <span>你的可用积分</span>
      <p>{{ points.integralBalance || 0 }}</p>
      <router-link to="/pointsdetail">积分明细</router-link>
    </div>
    <yd-cell-group>
      <yd-cell-item class="yd-ls-me-group">
        <span class="yd-ls-points-left-title" slot="left">
          签到
          <div><small>每日签到，坚持签到积分奖励额外奖励</small></div>
        </span>
        <span ref="ydwork1" @click="toSign(points.is_sign)" class="yd-ls-points-right-title" slot="right">去签到</span>
      </yd-cell-item>
      <yd-cell-item class="yd-ls-me-group">
        <span class="yd-ls-points-left-title" slot="left">
          上传验单<small>(进度 {{ points.upload_file_num }}/2) <i>2积分/张</i></small>
          <div><small>上传验单/处方并转换成功后可获得，每周更新</small></div>
        </span>
        <span ref="ydwork2" @click="handleRightTitle(0, points.upload_file_num)" class="yd-ls-points-right-title" slot="right">去完成</span>
      </yd-cell-item>
      <yd-cell-item class="yd-ls-me-group">
        <span class="yd-ls-points-left-title" slot="left">
          推荐用户<small>(进度 {{ points.recommend_m_num }}/2) <i>3积分/人</i></small>
          <div><small>推荐给朋友，入驻后可获得，每周更新</small></div>
        </span>
        <span ref="ydwork3" @click="handleRightTitle(1, points.recommend_m_num)" class="yd-ls-points-right-title" slot="right">去完成</span>
      </yd-cell-item>
      <yd-cell-item class="yd-ls-me-group">
        <span class="yd-ls-points-left-title" slot="left">
          申请预约<small>(进度 {{ points.order_app_num }}/1) <i>10积分</i></small>
          <div><small>申请预约医生，并完成问诊流程，每周更新</small></div>
        </span>
        <span ref="ydwork4" @click="handleRightTitle(2, points.order_app_num)" class="yd-ls-points-right-title" slot="right">去完成</span>
      </yd-cell-item>
      <yd-cell-item class="yd-ls-me-group" >
        <span class="yd-ls-points-left-title" slot="left">
          购药<small>(进度 {{ points.purchase_num }}/1) <i>20积分</i></small>
          <div><small>咨询医生并成功购药，每月更新</small></div>
        </span>
        <span ref="ydwork5" @click="handleRightTitle(3, points.purchase_num)" class="yd-ls-points-right-title" slot="right">去完成</span>
      </yd-cell-item>
    </yd-cell-group>
    <!--<yd-backtop></yd-backtop>-->
  </yd-ls-layout>
</template>

<style>

  .yd-ls-points-top {
    height: 140px;
    background-color: rgb(72, 112, 243);
    color: #fff;
    text-align: center;
  }
  .yd-ls-points-top>span {
    font-size: .32rem;
    display: block;
    padding-top: 20px;
    text-align: center;
    color: #ffde03eb;
    font-weight: 600;
  }
  .yd-ls-points-top>p {
    font-size: .68rem;
    color: #fff;
    text-align: center;
    padding: 5px 0;
  }
  .yd-ls-points-top>a {
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #646b88;
    width: 62px;
    line-height: 20px;
    background: #6495ed;
  }
  .yd-ls-points-left-title>small {
    padding-left: 5px;
  }
  .yd-ls-points-left-title>small>i {
    color: #e23535;
    padding-left: 5px;
  }
  .yd-ls-points-left-title>div>small {
    color: #bfbaba;
  }
  .yd-ls-points-right-title {
    border-radius: 3px;
    border: 1px solid #646b88;
    text-align: center;
    width: 50px;
    background: #4870f3;
    color: #fff;
  }
</style>
<script>
  import ydLsLayout from '../../../components/yd-ls-layout.vue'
  import api from '../../../axios/api'

  export default {
    name: 'points',
    data () {
      return {
        urls: 'info.html',
        points: {},
        pageIndex: 1,
        pageSize: 10
      }
    },
    created() {
    },
    methods: {
      init() {
        //TODO:初始化数据
        this.getPoints()
      },
      getPoints() {
        this.$dialog.loading.open(api.default_loading_txt);
        this.axios.get(api.points_data,{
          params: {
            pageindex: this.pageIndex,
            pagesize: this.pageSize
          }
        })
          .then(m=>{
            let points_data = m.data
            this.points = points_data.data
            this.getPointsStatu(this.points.is_sign, this.points.upload_file_num, this.points.recommend_m_num, this.points.order_app_num, this.points.purchase_num)
            this.$store.dispatch('fetchPointsData', points_data.data)
            this.$dialog.loading.close()
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      getPointsStatu(isSign, uploadNum, recommendNum, orderNum, purchaseNum) {

        //是否签到
        if(isSign) {
          this.$refs.ydwork1.innerHTML = '已签到'
        }
        //上传验单
        if(uploadNum >= 2) {
          this.$refs.ydwork2.innerHTML = '已完成'
          this.$refs.ydwork2.style.background = '#999'
        }
        //推荐用户
        if(recommendNum >= 2) {
          this.$refs.ydwork3.innerHTML = '已完成'
          this.$refs.ydwork3.style.background = '#999'
        }
        //申请预约
        if(orderNum >= 1) {
          this.$refs.ydwork4.innerHTML = '已完成'
          this.$refs.ydwork4.style.background = '#999'
        }
        //购药
        if(purchaseNum >= 1) {
          this.$refs.ydwork5.innerHTML = '已完成'
          this.$refs.ydwork5.style.background = '#999'
        }
      },
      handleRule() {
        this.$router.push({ path: 'pointsrule'})
      },
      handleRightTitle(index, vaild) {
        if(index === 0 && vaild < 2) {
          window.location = "photo.html"
          return
        }
        if(index === 1 && vaild < 2) {
          window.location = "seek.html"
          return
        }
        if(index === 2 && vaild < 1) {
          window.location = "seek.html"
          return
        }
        if(index === 3 && vaild < 1) {
          window.location = "seek.html"
          return
        }
      },
      toSign(isSign) {
        if(isSign) {
          this.$router.push({path: 'sign', query: {path: 'points'}})
        }else {
          this.$dialog.loading.open(api.default_loading_txt);
          this.axios.post(api.sign)
          .then(m=>{
            this.$dialog.loading.close()
            this.$router.push({path: 'sign', query: {path: 'points'}})
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: '签到出错==' + JSON.stringify(err)})
          })
        }
        
      }
    },
    mounted() {
      this.init()
      
    },
    components: { ydLsLayout }


  }
</script>
